<script setup lang="ts">
import { delayTimer } from '@v-c/utils'
import { AxiosError } from 'axios'
import { computed, ref } from 'vue'
import { registerApi, sendSmsCodeApi } from '~/api/common/login'
import pageBubble from '@/utils/page-bubble'

const message = useMessage()
const notification = useNotification()
const loginModel = reactive({
  userName: undefined,
  userCompany: undefined,
  userPassword: undefined,
  confirmPassword: undefined,
  userPhone: undefined,
  captchaCode: undefined, // 图形验证码
  captchaId: undefined, // 图形验证码ID
  verificationcode: undefined,
  type: 'account',
  remember: true,
  agreeToTerms: false,
})
const { t } = useI18nLocale()
const formRef = shallowRef()
const codeLoading = shallowRef(false)
const resetCounter = 60
const submitLoading = shallowRef(false)
const errorAlert = shallowRef(false)
const bubbleCanvas = ref<HTMLCanvasElement>()
const is_disabled = ref(false)

const showPassword = ref(false)
const showPassword2 = ref(false)

// 计算属性：检查表单是否完全有效
const isFormValid = computed(() => {
  // 必须同意协议
  if (!loginModel.agreeToTerms) {
    return false
  }

  // 检查所有必填字段
  const userName = String(loginModel.userName ?? '')
  const userCompany = String(loginModel.userCompany ?? '')
  const userPassword = String(loginModel.userPassword ?? '')
  const confirmPassword = String(loginModel.confirmPassword ?? '')
  const userPhone = String(loginModel.userPhone ?? '')
  const verificationcode = String(loginModel.verificationcode ?? '')

  return /^[\u4E00-\u9FA5\w-]+$/.test(userName) && userName.length >= 1 && userName.length <= 30
    && userCompany.length >= 2 && userCompany.length <= 50
    && /^\d{8}$/.test(userPassword)
    && confirmPassword === userPassword
    && /^\d{11}$/.test(userPhone)
    && /^\d{6}$/.test(verificationcode)
})

const { counter, pause, reset, resume, isActive } = useInterval(1000, {
  controls: true,
  immediate: false,
  callback(count) {
    if (count) {
      if (count === resetCounter)
        pause()
    }
  },
})
async function getCode() {
  // 检查是否还在倒计时中
  if (isActive.value) {
    message.error({
      content: '请等待上次验证码发送完成',
    })
    return
  }

  // 验证表单（手机号）
  await formRef.value.validate(['userPhone'])

  is_disabled.value = true
  codeLoading.value = true

  try {
    // 发送短信验证码
    await sendSmsCodeApi({
      phone: String(loginModel.userPhone ?? ''),
      ttl_seconds: 300,
    })

    // 发送成功后启动倒计时
    reset()
    resume()
    message.success('验证码已发送，请查收短信')
  }
  catch (error: any) {
    // request.ts 已经统一处理了有误消息显示，这里不需要再处理
  }
  finally {
    codeLoading.value = false
    // 发送完成后重新启用按钮
    is_disabled.value = false
  }
}


// 切换密码显示/隐藏
function togglePassword() {
  showPassword.value = !showPassword.value
}

// 切换确认密码显示/隐藏
function togglePassword2() {
  showPassword2.value = !showPassword2.value
}

async function submit() {
  submitLoading.value = true
  try {
    await formRef.value?.validate()
    const payload = {
      userName: String(loginModel.userName || ''),
      userCompany: String(loginModel.userCompany || ''),
      userPassword: String(loginModel.userPassword || ''),
      confirmPassword: String(loginModel.confirmPassword || ''),
      userPhone: String(loginModel.userPhone || ''),
      verificationcode: String(loginModel.verificationcode || ''),
    }

    try {
      const response = await registerApi(payload) as any
      // 新结构：{ code: 0, message: "OK", data: { userName, userCompany, userPhone } }
      if (response && response.code === 0) {
        notification.success({
          message: '注册成功',
          description: `欢迎 ${response.data.userName}，请使用账号登录`,
          duration: 3,
        })
        // 延迟跳转，确保通知显示完成
        setTimeout(() => {
          // 使用 window.location.href 确保完全重新加载页面
          window.location.href = '/registration_pc/login'
        }, 1000)
      }
      else {
        // request.ts 已经统一处理了有误消息显示，这里不需要再处理
        submitLoading.value = false
      }
    }
    catch (e) {
      // request.ts 已经统一处理了有误消息显示，这里不需要再处理
      submitLoading.value = false
    }
  }
  catch (e) {
    if (e instanceof AxiosError) {
      errorAlert.value = true
    }
    else if (e instanceof Error) {
      message.error({
        content: e.message,
      })
    }
  }
  finally {
    submitLoading.value = false
  }
}
onMounted(async () => {
  await delayTimer(300)
  pageBubble.init(unref(bubbleCanvas)!)

  // 检查是否已经同意协议
  const accepted = localStorage.getItem('userAgreementAccepted')
  if (accepted === 'true') {
    loginModel.agreeToTerms = true
  }
})

// 密码确认验证器
function confirmPasswordValidator(_rule: any, value: any) {
  if (!value || value === '') {
    return Promise.reject(new Error(''))
  }
  if (value !== loginModel.userPassword) {
    return Promise.reject(new Error('两次输入的密码不一致'))
  }
  return Promise.resolve()
}

onBeforeUnmount(() => {
  pageBubble.removeListeners()
})
</script>

<template>
  <div class="login-container" style="background-color: #ffffff;">
    <div h-screen w-screen absolute z-10 style="">
      <!-- 展示银行背景信息样式 -->
      <div
        class="banner-container"
        style="
           width: 100%;
           height: 170px;
           background-color: rgb(57,162,252);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0;
           padding: 0;
           overflow: hidden;
           "
      >
        <img
          src="https://f.hotgrid.cn/electricity-service/horizo_logo.png"
          alt="考试宣传横幅"
          class="banner-image"
          style="
              height: 188px;
              position: relative;
              width: auto;
              display: block;
              margin: 0;
              padding: 0;
              "
        >
      </div>
      <!-- 左右分栏 -->
      <div
        class="main-layout-container"
      >
        <!-- 登录卡片 -->
        <center>
          <a-form
            ref="formRef"
            style="
                position: relative;
                top: -24px;
                width:460px;
                padding: 0 25px;
                " :model="loginModel"
          >
            <br>
            <br>
            <br>
            <a-tabs v-model:active-key="loginModel.type" class="login-tabs">
              <a-tab-pane
                key="account" :tab="t('用户注册')"
              />
            </a-tabs>
            <!-- 判断是否存在error -->
            <a-alert
              v-if="errorAlert && loginModel.type === 'account'"
              style="display: none;" mb-24px
              :message="t('pages.login.accountLogin.errorMessage')" type="error" show-icon
            />
            <a-alert
              v-if="errorAlert && loginModel.type === 'mobile'"
              style="display: none;" mb-24px
              :message="t('pages.login.phoneLogin.errorMessage')" type="error" show-icon
            />
            <span style="opacity:0">0</span>
            <template v-if="loginModel.type === 'account'">
              <!-- 用户姓名 -->
              <a-form-item
                name="userName"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: t('pages.login.username.required') },
                  {
                    pattern: /^[\u4e00-\u9fa5A-Za-z0-9_-]+$/,
                    message: '姓名格式有误，支持中文、英文、数字、下划线和连字符',
                    trigger: 'blur',
                  },
                  {
                    max: 20,
                    message: '姓名过长',
                    trigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">姓名</label>
                  <a-input
                    v-model:value="loginModel.userName"
                    class="custom-input-bg"
                    placeholder="请输入姓名"
                    style="flex: 1;"
                    size="large"
                    :maxlength="50"
                    autocomplete="off"
                    @press-enter="submit"
                  />
                </div>
              </a-form-item>

              <!-- 用户单位 -->
              <a-form-item
                name="userCompany"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: t('pages.login.unit.required') },
                  {
                    max: 20,
                    message: '单位名称过长',
                    trigger: 'blur',
                  },
                  { min: 2, max: 50, message: t('pages.login.unit.length'), trigger: 'blur' },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">工作单位</label>
                  <a-input
                    v-model:value="loginModel.userCompany"
                    class="custom-input-bg"
                    placeholder="请输入工作单位"
                    style="flex: 1;"
                    autocomplete="off"
                    size="large"
                    :maxlength="50"
                    @press-enter="submit"
                  />
                </div>
              </a-form-item>

              <!-- 用户密码 -->
              <a-form-item
                name="userPassword"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: '请输入密码' },
                  {
                    pattern: /^\d{8}$/,
                    message: '密码格式有误，请输入8位数字',
                    trigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">密码</label>
                  <a-input
                    v-model:value="loginModel.userPassword"
                    :type="showPassword ? 'text' : 'password'"
                    class="password-input-wrapper"
                    placeholder="请输入8位数字密码"
                    :maxlength="8"
                    autocomplete="off"
                    @press-enter="submit"
                    @blur="() => formRef?.validateFields(['confirmPassword'])"
                  >
                    <template #suffix>
                      <span class="password-toggle-eye" @click="togglePassword">
                        <span v-if="showPassword">
                          <img
                            src="@/assets/icons/eyes2.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                        <span v-else>
                          <img
                            src="@/assets/icons/eyes1.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                      </span>
                    </template>
                  </a-input>
                </div>
              </a-form-item>
              <a-form-item
                name="confirmPassword"
                :validate-trigger="['blur', 'change']"
                :rules="[
                  { required: true, message: '请确认密码' },
                  {
                    validator: confirmPasswordValidator,
                  },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">确认密码</label>
                  <a-input
                    v-model:value="loginModel.confirmPassword"
                    :type="showPassword2 ? 'text' : 'password'"
                    class="password-input-wrapper"
                    placeholder="请再次输入8位数字密码"
                    :maxlength="8"
                    autocomplete="off"
                    @press-enter="submit"
                  >
                    <template #suffix>
                      <span class="password-toggle-eye" @click="togglePassword2">
                        <span v-if="showPassword2">
                          <img
                            src="@/assets/icons/eyes2.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                        <span v-else>
                          <img
                            src="@/assets/icons/eyes1.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                      </span>
                    </template>
                  </a-input>
                </div>
              </a-form-item>
              <a-form-item
                name="userPhone"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: t('pages.login.phoneNumber.required') },
                  {
                    pattern: /^\d{11}$/,
                    message: t('pages.login.phoneNumber.invalid'),
                    trigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">手机号</label>
                  <a-input
                    v-model:value="loginModel.userPhone"
                    class="custom-input-bg"
                    placeholder="请输入手机号"
                    style="flex: 1;"
                    autocomplete="off"
                    size="large"
                    :maxlength="11"
                    @press-enter="submit"
                  />
                </div>
              </a-form-item>

              <a-form-item
                name="verificationcode"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: t('pages.login.captcha.required') },
                  {
                    pattern: /^\d{6}$/,
                    message: '验证码需为6位数字',
                    trigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label style="width: 80px;" class="input-label">短信验证码</label>
                  <div class="input-with-button" style="flex: 1;">
                    <a-input
                      v-model:value="loginModel.verificationcode"
                      class="custom-input-bg"
                      placeholder="请输入短信验证码"
                      style="flex: 1;"
                      size="large"
                      :maxlength="6"
                      autocomplete="off"
                      @press-enter="submit"
                    />
                    <a
                      href="#"
                      class="code-button"
                      :class="{ disabled: is_disabled || isActive }"
                      :loading="codeLoading"
                      size="large"
                      :disabled="is_disabled || isActive"
                      @click="!is_disabled && !isActive ? getCode() : null"
                    >
                      <template v-if="!isActive">
                        {{ t('pages.login.phoneLogin.getVerificationCode') }}
                      </template>
                      <template v-else>
                        <span style="color: #BBBBBB;">
                          {{ t('pages.getCaptchaSecondText') }}
                          {{ resetCounter - counter }} 秒
                        </span>
                      </template>
                    </a>
                  </div>
                </div>
              </a-form-item>
            </template>
            <div class="mb-24px flex-between" style="margin-top: 20px;">
              <a
                v-if="loginModel.type === 'mobile'"
                style="color: grey; opacity: 0;"
              >
                {{ t('pages.login.forgotPassword') }}
              </a>
              <a
                v-else
                style="color: grey; opacity: 0;"
              >{{ t('pages.login.forgotyanzhengma') }}</a>

              <span
                style="opacity: 1;"
              >
                <a
                  href="/registration_pc/login"
                  class="switch-link"
                >
                  已有账号？去登录
                </a>
              </span>
            </div>
            <!-- 协议同意复选框 -->
            <div
              class="agreement-checkbox"
              style="
                display:none;

              position: relative;
              top: -32px;
              margin-bottom: 10px;"
            >
              <a-checkbox v-model:checked="loginModel.agreeToTerms">
                <span
                  style="color:rgb(102, 102, 102)"
                >
                  已阅读并同意使用协议和隐私政策
                </span>
                <!-- <a @click="() => router.push('/user-agreement')" style="color: #1976D2; text-decoration: underline;">
                    《用户服务协议》
                  </a> -->
              </a-checkbox>
            </div>

            <a-button
              type="primary"
              class="submit-button"
              :style="{
                backgroundColor: isFormValid ? 'rgba(34, 116, 227, 1.0)' : 'rgba(34, 116, 227, 1)',
                position: 'relative',
                color: isFormValid ? 'rgba(255, 255, 255, 1.0)' : 'rgba(255, 255, 255, 1)',
                top: '-15px',
                height: '58px',
                fontSize: '16px',
                fontWeight: '500',
                borderRadius: '3px',
                transition: 'all 0.3s ease',
                marginBottom: '120px',
              }"
              block :loading="submitLoading" size="large" @click="submit"
            >
              注册
            </a-button>
          </a-form>
        </center>
<br></br>
<br></br>
<br></br>
        <div class="footer">
          <div
            style="
              background-color:#929292;
              "
          >
            <center>
              <div
                style="
                    width: 100%;
                    height: 30px;
                  background-color:#929292;
                  position: absolute;
                  bottom: 0;
                  "
              >
                <span
                  style="
                    font-size: 14px;
                    position: relative;
                    top: 5px;
                    "
                >
                  Copyright  2025.中国贸易促进委员会培训中心 Rights Reserved
                </span>
              </div>
            </center>
          </div>
        </div>
      </div>

      <!-- 1展示登录页面 -->
    </div>

    <!-- 主题登录 -->

    <div 
      class="fixed-footer"
      py-12px px-50px fixed bottom-0 z-11 w-screen 
      text-14px
    >
      <div style="text-align: center; color: #000000;">
        Copyright 2025.中国贸易促进委员会培训中心 Rights Reserved
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
/* 登录页 tabs 样式 */
.login-tabs {
  :deep(.ant-tabs-tab),
  :deep(.ant-tabs-tab-btn) {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: '等线';
    color: #7c7c7c !important;
  }

  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #4781D2 !important;
    font-family: '等线';
    font-weight: 500 !important;
  }

  :deep(.ant-tabs-ink-bar) {
    background-color: #4781D2 !important;
  }
}

/* 原生密码框样式 */
.password-input-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 统一输入框样式 - 白色背景镂空效果 */
:deep(.ant-input),
.password-input {
  background-color: #FFFFFF !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

:deep(.ant-input:focus),
.password-input:focus {
  border-color: #40a9ff !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 登录按钮样式调整 */
:deep(.ant-btn-primary) {
  height: 35px !important;
  font-size: 14px !important;
}

/* 统一输入框标签样式 - 横向布局 */
.label-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

/* 移除浮动标签效果 */
.floating-label {
  display: none !important;
}

.password-input {
  width: 100%;
  height: 35px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: #F9F9F9;
  outline: none;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.eye-icon {
  font-size: 16px;
  user-select: none;
}

/* 密码输入框后缀样式 */
.password-toggle-eye {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 2px 4px;
  border-radius: 2px;
  border: none;
  user-select: none;
}

.password-toggle-eye:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 统一输入框高度 */
.password-input-wrapper {
  width: 100%;
}

.password-input-wrapper :deep(.ant-input) {
  height: 35px !important;
  padding-right: 40px !important;
  border: none !important; /* 去掉内层 input 的边框 */
  box-shadow: none !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper) {
  background-color: #F9F9F9 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper:hover) {
  border-color: #40a9ff !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-focused) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 有误状态 */
.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error) {
  border-color: #ff4d4f !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error:focus) {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

.code-input-container {
  position: relative;
  width: 100%;
}

.input-with-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #F9F9F9;
  border-radius: 3px;
  overflow: hidden; /* 确保圆角效果 */
}

.code-input {
  flex: 1;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-right: 120px; /* 为按钮留出空间 */
}

.code-input:focus {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.code-button {
  position: absolute;
  right: 4px;
  height: 32px;
  border: none;
  box-shadow: none;
  background: transparent;
  color: #1976D2;
  font-size: 14px;
  padding: 5px 10px;
  font-family: 'Microsoft YaHei', '等线', sans-serif;
  white-space: nowrap;
  z-index: 2;
}

.code-button:hover:not(.disabled) {
  background: transparent !important;
  color: #1976D2 !important;
  cursor: pointer;
}

.code-button.disabled,
.code-button:disabled {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.code-button.disabled:hover,
.code-button:disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* 浮动标签样式调整 */
.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #376d9b;
  transform: translateY(0);
  background-color: #fff;
}

.floating-label-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.floating-label {
  font-weight: 400;
  -webkit-font-smoothing: auto; /* 关闭抗锯齿，获得粗糙感 */
  -moz-osx-font-smoothing: auto;
  text-shadow: 0.1px 0.1px 0.1px rgba(99, 99, 99, 0.1); /* 轻微阴影增强质感 */
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-family: '粗体';
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #959595;
  transform: translateY(0);
}

/* 自定义表单验证有误消息样式 - 与输入框左侧对齐 */
:deep(.ant-form-item-explain-error) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 92px !important; /* 60px label width + 12px gap */
  color: #ff4d4f !important; /* 红色有误文字 */
  font-size: 14px !important;
}

.floating-label-input {
  padding-top: 8px;
  height: 48px;
}

/* 调整输入框聚焦时的样式 */
.floating-label-input:focus {
  background-color: #fff;
  border: 1px solid #376d9b !important;
}

/* 确保标签在输入框聚焦时也显示 */
.floating-label-input:focus + .floating-label {
  top: 0;
  font-size: 12px;
  color: #8a8a8a;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.08s ease;
}

.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: scroll;
  background: var(--bg-color-container);
  padding-bottom: 300px; /* 为footer留出空间，防止按钮被遮挡 */
  margin-bottom: 200px;
}

/* 滚动条样式 - 白色背景 */
.login-container::-webkit-scrollbar {
  width: 8px;
  background-color: #ffffff;
}

.login-container::-webkit-scrollbar-track {
  background-color: #ffffff;
}

.login-container::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

.login-container::-webkit-scrollbar-thumb:hover {
  background-color: #bfbfbf;
}

@media (max-height: 800px) {
  .login-container {
    padding-bottom: 350px;
    margin-bottom: 250px;
  }
}

@media (max-height: 700px) {
  .login-container {
    padding-bottom: 400px;
    margin-bottom: 300px;
  }
}

.login-lang {
  height: 40px;
  line-height: 44px;
}

.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ant-pro-form-login-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  padding: 32px 0;
  padding-bottom: 250px;
  overflow: auto;
  background: inherit
}

@media (max-height: 800px) {
  .ant-pro-form-login-container {
    padding-bottom: 300px;
  }
}

@media (max-height: 700px) {
  .ant-pro-form-login-container {
    padding-bottom: 350px;
  }
}

.ant-pro-form-login-header a {
  text-decoration: none
}

.ant-pro-form-login-title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 33px;
  line-height: 1;
}

.ant-pro-form-login-logo {
  width: 44px;
  height: 44px;
  margin-right: 16px;
  vertical-align: top
}

.ant-pro-form-login-desc {
  color: var(--text-color-1);
  font-size: 14px;
  margin-left: 16px
}

.ant-pro-form-login-main-right {
  .ant-tabs-nav-list {
    margin: 0 auto;
    font-size: 16px;
  }

  .ant-pro-form-login-other {
    line-height: 22px;
    text-align: center
  }

  /* 自定义选项卡颜色为#1976D2 */
  /* 使用更直接的选择器提高优先级 */
  &:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: #6d6d6d !important;
    font-weight: 00 !important; /* 加粗字体 */
    font-size: 17px;
    font-family: '等线';
  }

  &:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #181818 !important;
    font-weight: 400 !important; /* 加粗字体 */

  }

  &:deep(.ant-tabs-ink-bar) {
    background-color: #256bd4 !important;
  }

  &:deep(.ant-tabs-tab:not(.ant-tabs-tab-active):hover .ant-tabs-tab-btn) {
    color: #000000 !important;
  }

}

.ant-pro-form-login-main{
  box-shadow: var(--c-shadow);
}

.icon {
  margin-left: 8px;
  color: var(--text-color-2);
  font-size: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: color .3s;

  &:hover {
    color: var(--pro-ant-color-primary);
  }
}

/* 自定义输入框背景色 */
  .custom-input-bg {
    &:deep(.ant-input) {
      background-color: #F9F9F9 !important;
    }

    &:deep(.ant-input-group-wrapper) {
      background-color: #F9F9F9 !important;
    }

    /* 确保placeholder区域也被覆盖 */
    &:deep(.ant-input::placeholder) {
      background-color: #F9F9F9 !important;
      opacity: 0.8;
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

    /* 兼容不同浏览器的placeholder样式 */
    &:deep(.ant-input:-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

    &:deep(.ant-input::-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

  /* 针对有清除按钮的情况调整内边距 */
  &:has(.ant-input-clear-icon) {
    &:deep(.ant-input) {
      padding-right: 24px !important;
    }
  }
}
.login-media(@width:100%) {
  .ant-pro-form-login-main{
    width: @width;
  }
  .ant-pro-form-login-main-left{
    display: none;
  }
  .ant-pro-form-login-main-right{
    width: 100%;
  }
  .ant-pro-form-login-desc{
    display: none;
  }
}
@media (min-width : 992px) {
  .ant-pro-form-login-main-left{
    width: 700px;
  }
}
@media(min-width:768px) and (max-width:991px){
  .ant-pro-login-divider{
    display: none;
  }
  .login-media(400px)
}
/* 响应式布局：当宽度小于1600px时，隐藏右侧栏，左侧居中 */
@media screen and (max-width: 6599px) {
  .main-layout-container {
    overflow-y: scroll;
    height: 80vh;
  }

  /* main-layout-container 滚动条样式 - 白色背景 */
  .main-layout-container::-webkit-scrollbar {
    width: 8px;
    background-color: #ffffff;
  }

  .main-layout-container::-webkit-scrollbar-track {
    background-color: #ffffff;
  }

  .main-layout-container::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 4px;
  }

  .main-layout-container::-webkit-scrollbar-thumb:hover {
    background-color: #bfbfbf;
  }

  .login-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }

  .right-panel {
    display: none !important;
  }
}

@media screen and (max-width:767px) {
  .login-media(350px);

  .ant-pro-login-divider{
    display: none;
  }

  // 移动端：外层容器宽度自适应，减少留白
  .ant-pro-form-login-main {
    width: 98% !important; // 从95%增加到98%
  }

  // 移动端：登录卡片宽度自适应
  .box-border {
    width: 100% !important;
    min-height: auto !important;
  }

  // 移动端：隐藏左侧图片
  .login-left-image {
    display: none !important;
  }

  // 右侧表单区域在移动端全宽
  .ant-pro-form-login-main-right {
    width: 100% !important;
    padding: 20px 10px !important; // 减少左右内边距从15px到10px
  }

  // 表单宽度调整
  .ant-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  // 调整输入框容器宽度
  .floating-label-container {
    width: 100% !important;
  }

  // 表单内容左右内边距调整并移除left偏移
  .ant-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important; // 移除80px的偏移
  }

  // 确保所有输入框在移动端为100%宽度
  .custom-input-bg,
  .floating-label-input {
    width: 100% !important;
    max-width: 100% !important;

    &:deep(.ant-input) {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  // 输入框样式容器
  .floating-label-container {
    width: 100% !important;
  }

  .login-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 40px !important;
  }
}

/* 解决按钮被遮挡问题 - 确保有足够的底部空间 */
.submit-button {
  margin-bottom: 20px !important;
}

/* 确保表单区域有足够的底部padding */
.login-card {
  padding-bottom: 40px !important;
}

/* 确保注册按钮区域有足够的底部空间，不被遮挡 */
.submit-button {
  position: relative !important;
  z-index: 10 !important;
}

/* 表单容器增加底部空间 */
.ant-form {
  padding-bottom: 150px !important;
}

/* Footer 样式 - 确保不穿透 */
.fixed-footer {
  background-color: #929292 !important;
  text-align: center;
}

/* 登录/注册切换链接样式 */
.switch-link {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #4781D2 !important;
  text-decoration: underline !important;
  text-underline-position: auto !important;
  transition: color 0.3s ease !important;
}

.switch-link:hover {
  color: #256bd4 !important;
}
</style>
